<template>
  <!-- 原生功能透传 -->
  <up-popup
    ref="popupRef"
    round="16"
    v-bind="attrs"
    v-on="listeners"
    v-model:show="innerShow"
  >
    <template v-for="(_, name) in $slots" #[name]="slotData">
      <slot :name="name" v-bind="slotData" />
    </template>
  </up-popup>
</template>

<script setup lang="ts">
import { ref, watch, useAttrs } from "vue";

// 对外暴露 v-model
const props = defineProps<{ modelValue: boolean }>();
const emit = defineEmits(["update:modelValue", "open", "close"]);

// 继承 up-popup 原有属性/事件
const attrs = useAttrs();
const listeners = {
  open: () => emit("open"),
  close: () => emit("close"),
};

const innerShow = ref(props.modelValue);

// 同步父子 v-model
watch(
  () => props.modelValue,
  (val) => {
    innerShow.value = val;
  }
);

watch(innerShow, (val) => {
  emit("update:modelValue", val);
});

// 可选：暴露方法给父组件
const popupRef = ref();
defineExpose({
  open: () => (innerShow.value = true),
  close: () => (innerShow.value = false),
  popupRef,
});
</script>

<style scoped lang="scss">
.popup-header {
  padding: 12px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}
.popup-footer {
  padding: 12px;
  border-top: 1px solid #eee;
  text-align: right;
}
</style>
